@charset "utf-8";

.container { background:#fff !important;}
main .area { width:1200px; margin:0 auto;}
#bo_list { position:relative; width:1200px; margin: 0 auto; padding-top:5px; padding-bottom:50px;}
#bo_write { position:relative; width:1200px; margin: 0 auto; padding-top:20px; padding-bottom:50px;}
#bo_view { position:relative; width:1200px; margin: 0 auto; padding-top:20px; padding-bottom:50px;}

/* 타이틀 */
.titlebar { width:100%; background:#000; }
.titlebar .area { position:relative;}
.titlebar .area:after { display:block; clear:both; content:'';}
.titlebar h2 { float:left; padding:28px 0px 5px 0px; color:#fff; font-size:25px;}
.titlebar i {margin:8px 5px 0 0}

.titlebar .search { position:absolute; top:18px; right:0; font-size:0;} 
.titlebar .search legend { display:none}
.titlebar .search input[type="text"] { border-color:rgba(0,0,0,0.1); background:#fff; box-shadow:none; font-size:12px; color:#222; width: 150px; height:30.4px; margin:0px 5px 0px 5px;}
.titlebar .search input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: rgba(0,0,0,0.4);}
.titlebar .search input[type="text"]::-moz-placeholder { /* Firefox 19+ */color: rgba(0,0,0,0.4);}
.titlebar .search input[type="text"]:-ms-input-placeholder { /* IE 10+ */color: rgba(0,0,0,0.4);}
.titlebar .search input[type="text"]:-moz-placeholder { /* Firefox 18- */color: rgba(0,0,0,0.4);}

.titlebar .search { position:absolute; top:18px; right:0; font-size:0;} 
.titlebar .search legend { display:none}
.titlebar nav.sub { border-top:1px solid rgba(0,0,0,0.1); background:rgba(255,240,0,0.4);}
.titlebar nav.sub ul { font-size:12px;}
.titlebar nav.sub ul:after { display:block; clear:both; content:'';}
.titlebar nav.sub ul li { float:left; border:1px solid rgba(0,0,0,0.2); border-left:0; border-top:0;}
.titlebar nav.sub ul li:first-child { border-left:1px solid rgba(0,0,0,0.2);}
.titlebar nav.sub ul li a.active { border-bottom:1px solid #fff; background:#fff;}
.titlebar nav.sub ul li a { display:block; height:38px; padding:10px 18px; color:#333;}

.option nav.sub { background:#f6f6f6; border-bottom:1px solid rgba(0,0,0,0.2); }
.option nav.sub ul { font-size:12px; margin-bottom:-1px}
.option nav.sub ul:after { display:block; clear:both; content:'';}
.option nav.sub ul li { float:left; border:1px solid rgba(0,0,0,0.2); border-left:0; border-top:0;}
.option nav.sub ul li:first-child { border-left:1px solid rgba(0,0,0,0.2);}
.option nav.sub ul li a.active { border-bottom:1px solid #fff; background:#fff;}
.option nav.sub ul li a { display:block; height:38px; padding:10px 18px; color:#333;}


/* 게시판 목록 */
#bo_list .control { margin-top:15px;}
#bo_list .control:after { display:block; clear:both; content:'';}
#bo_list .paging { float:left; margin:0;}
#bo_list .paging ul { vertical-align:top;}
#bo_list .btnset { float:right;}
#bo_list .btnset button { float:left;}
#bo_list .btnset a.button { margin-left:3px;}

.mcategory { position:absolute; top:18px; right:0; font-size:0;}
.mcategory legend { display:none}
.mcategory p { padding-bottom:5px;}
.mcategory span { padding-right:10px;}
.mcategory .btnset { display:inline-block; position:relative; float:right;  }

ul.table { width:100%; font-size:13px; text-align: center;}
ul.table li:after { display:block; clear:both; content:'';}
ul.table li>span { display:inline-block; padding:10px 5px; text-align:center;}
ul.table li.thead span { height:40px; border-left:1px solid #ccc; font-weight:normal; background:#eee;}
ul.table li.thead span:first-of-type { border-left:0;}
ul.table li span.check { float:left; width:40px;}
ul.table li span.number { float:left; width:350px;}
ul.table li span.category { float:left; width:190px;}
ul.table li span.title { width:240px; padding-left:10px; text-align:center;}
ul.table li span.title.title_adm { width:200px;}
ul.table li span.title.title_cate { width:700px;}
ul.table li span.title.title_adm.title_cate { width:660px;}
ul.table li span.date { float:right; width:200px;}
ul.table li span.writer { float:right; width:410px;}

ul.table li.thead a { color:#333;}
ul.table li.tbody.notice a { color:rgba(0,0,0,0.8);}
ul.table li.empty_table { color:#555; border-bottom:1px solid rgba(0,0,0,0.2);}
ul.table li.tbody { border:0; border-bottom:1px solid rgba(0,0,0,0.1); color:rgba(0,0,0,0.7);}
ul.table li.tbody a { color:rgba(0,0,0,0.4);}
ul.table li.tbody .title img { margin:0 0 1px 3px; vertical-align:middle; opacity:0.8;}
ul.table li.tbody .cnt_cmt { color:#00bbbb; opacity:0.6;}

ul.table li.tbody:hover { background-color:#fcfcfc; color:rgba(0,0,0,0.8);}
ul.table li.tbody:hover a { color:rgba(0,0,0,0.8);}
ul.table li.tbody:hover .cnt_cmt { opacity:0.8;}
ul.table li.tbody:hover .title img { opacity:1.0;}
ul.table li.empty_table:hover { background:none; color:#555;}

/* 게시판 쓰기 */
#bo_write label.wr_content { display:none;}

#bo_write h2 { font-size:24px; margin-bottom:10px;}
#char_count {font-weight:bold}

#autosave {position:relative;}
#autosave_pop {display:none;z-index:10;padding:8px;width:;height:auto !important;height:180px;max-height:180px;border:1px solid #ccc;background:#fff;overflow-y:scroll}
html.no-overflowscrolling #autosave_pop {height:auto;max-height:10000px !important} /* overflow 미지원 기기 대응 */
#autosave_pop strong {position:absolute;font-size:0;line-height:0;overflow:hidden}
#autosave_pop div { }
#autosave_pop ul {margin:0;padding:0;border-top:1px solid #e9e9e9;list-style:none}
#autosave_pop li {padding:8px 5px;border-bottom:1px solid #e9e9e9;zoom:1}
#autosave_pop li:after {display:block;visibility:hidden;clear:both;content:""}
#autosave_pop li:hover { background-color:#f7f7f7;}
#autosave_pop a {display:block;float:left}
#autosave_pop span {display:block;float:right}
.autosave_content {display:none}
.button.autosave_close { width:100%;}

#bo_write .btn_confirm { width:100%; text-align:center; padding-top:20px;}

/* 뷰페이지 */
#bo_view hgroup { position:relative; border-bottom:2px solid #4d4f53; padding-bottom:7px;}
#bo_view header hgroup h2 { font-size:23px; line-height:26px; font-weight:normal;}
#bo_view header hgroup h2 .category { background:#eee; color:#999; padding:3px 5px; margin:-3px 4px 0 0; border-radius:3px; font-size:14px;}
#bo_view header .page { display:none; position:absolute; top:0; right:0;}
#bo_view .btnset { float:right;text-align:right; margin:5px 0}

#bo_view .bo_img {margin:0 0 10px;width:100%; text-align:center;overflow:hidden;zoom:1}
#bo_view .bo_img img:after {display:block;visibility:hidden;clear:both;content:""}
#bo_view .bo_img img {margin-bottom:20px;max-width:100%;height:auto}

#bo_view #bo_v_sns { width:100%; clear:both; position:relative; margin-top:60px;}
#bo_view #bo_v_sns li { display:inline-block; margin-left:5px;}

#bo_view section h2 { display:none;}
#bo_view section.info { margin:5px 0 0 0; padding-bottom:5px; color:#777; font-size:12px;}
#bo_view section.info .sv_member,
#bo_view section.info .sv_guest { color:#777;}
#bo_view section.info a { font-size:12px;}
#bo_view section.info > span { padding-left:10px;}
#bo_view section.info span.start { padding-left:2px;}
#bo_view section.info strong { color:#ccc; font-weight:normal}

#bo_view section.file, #bo_view section.link { background:#f1f1f1; padding:5px; border-bottom:1px solid #fff;}
#bo_view section.file li, #bo_view section.link li { padding:5px;}
#bo_view section.file .icon.file, #bo_view section.link .icon.link { margin-top:1px; padding-left:5px;}
#bo_view section.file span, #bo_view section.link span { color:#aaa;}
#bo_view section.file span.download_date { display:inline-block; padding-left:10px;}

#bo_view section.link a:hover { text-decoration:underline;}

#bo_view section.content { clear:both; margin:60px 0; font-size:14px; line-height:180%; color:#222;}
#bo_view section.content p.img { margin-bottom:10px; text-align:center;}

/* 게시판 댓글 */
#co_list { padding:20px 0 10px; font-size:14px;}
#co_list form .confirm input { position:absolute; bottom:10px !important; right:10px !important}
section#co_list h2 { display:block; margin-bottom:10px; font-size:14px; font-weight: bold;}
section#co_list h2 span { font-size:11px; color:#00bbbb; font-weight:bold; padding-left:2px;}
#co_list article { position:relative; padding:10px; margin-bottom:5px; border:1px solid #dfdfdf; background:#fff;}
#bo_view .nocomment { position:relative; padding:10px; margin-bottom:5px; border:1px solid #dfdfdf; background:#fff;}
#co_list .member_photo { position:absolute; top:-12px; left:-60px;}
#co_list .gray { background-color:#fcfcfc;}

#co_list .arrow_comment { position:absolute; top:-10px; left:-74px;}
#co_list .arrow_comment2 { position:absolute; top:2px; left:-16px;}
#co_list .depth { position:absolute; top:0px; left:0px; bottom:0px; display:block; width:4px; height:initial; background:#dfdfdf; z-index:-10;}

#co_list header { position:relative; display:inline-block; padding:0;}
#co_list .member { font-weight:bold}
#co_list .member .guest { font-weight:bold;}
#co_list .ip { font-size:11px; color:#bbb;}
#co_list .date { font-size:11px; color:#bbb; margin-right:5px;}
#co_list h1 { overflow:hidden; position:absolute; top:-99em; left:0; width:1px; height:1px; font-size:0; line-height:0; white-space:nowrap;}
#co_list a {text-decoration:none;}
#co_list p {padding-top:5px;line-height:170%}
#co_list p a {text-decoration:underline; position:absolute; top:55px; left:12px;}
#co_list p a.s_cmt { top:32px; left:30px;}

#co_list footer { position:absolute; top:5px; right:10px; zoom:1}
#co_list footer:after {display:block;visibility:hidden;clear:both;content:""}
#co_list footer .btn { display:inline-block;}
#co_list footer .btn li { display:inline-block;}

#co_list_sns {margin:0;padding:0;list-style:none;zoom:1}
#co_list_sns:after {display:block;visibility:hidden;clear:both;content:""}
#co_list_sns li {float:left;margin:0 20px 0 0}
#co_list_sns input {margin:0 0 0 5px}

#co_write { position:relative; margin-bottom:20px; padding:18px 13px 18px 14px; background-color:#e1e1e1;}
#co_write h2 { display:inline-block; margin-right:8px; padding-bottom:12px; font-size:16px;}
#co_write .info { font-size:14px; color:#777;}
#co_write .member_photo { display:none; position:absolute; top:0; left:-50px; text-align:center;}

/* 댓글의 댓글 */
#co_list article span h2 { display:inline-block; margin:15px 8px 0 0; font-size:15px; color:#ccc; font-weight:normal;}
#co_list article span .info { font-size:14px; color:#777;}
#co_list .content .guest { display:inline-block; float:left; margin:5px 0; padding-right:13px; border-right:1px solid #c0c0c0;}
#co_list .guest.view { display:inline-block;}
#co_list .guest label { display:none}
#co_list .guest_input { width:131px; height:28px; margin-bottom:2px; padding:2px; background:#fff; font-size:14px; line-height:24px; color:#000;}

#co_list .guest_input::-webkit-input-placeholder { /* WebKit browsers */color:#969696;}
#co_list .guest_input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#969696;}
#co_list .guest_input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
  color:#969696;}
#co_list .guest_input:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#969696;}
#co_list #wr_password { display:block; margin-top:-1px;}

#co_list #captcha { margin:5px 10px 10px 14px;}
#co_list #captcha #captcha_info { display:none;}
#co_list #captcha #captcha_img { width:120px; height:58px; border:1px solid #c0c4cb;}

#co_write .service { display:none; height:20px;}
#co_write .service label { line-height:20px;}
#co_write .rating { display:block;}
#co_write .content, #co_list .content { margin-right:71px;}
#co_write .content .guest{ margin:5px 0 3px 0;}
#co_list .content  .guest{ margin:5px 0 3px 0;}
#co_write input[type="submit"].button, #co_list input[type="submit"].button { position:absolute; bottom:18px; right:13px; height:80px; padding:20px; border-radius:0; font-size:15px;}
#co_write textarea, #co_list textarea { height:80px; border-radius:0;}
#co_write .guest { display:inline-block; float:left; margin:5px 0; padding-right:13px; border-right:1px solid #c0c0c0;}
#co_write .guest.view { display:inline-block;}
#co_write .guest label { display:none}
#co_write .guest_input { width:131px; height:28px; margin-bottom:2px; padding:2px; background:#fff; font-size:14px; line-height:24px; color:#000;}

#co_write .guest_input::-webkit-input-placeholder { /* WebKit browsers */color:#969696;}
#co_write .guest_input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:#969696;}
#co_write .guest_input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
  color:#969696;}
#co_write .guest_input:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#969696;}
#co_write #wr_password { display:block; margin-top:-1px;}

#co_write #captcha { margin:5px 10px 10px 14px;}
#co_write #captcha #captcha_info { display:none;}
#co_write #captcha #captcha_img { width:120px; height:58px; border:1px solid #c0c4cb;}

#mo_menu { z-index:1000;}
.titlebar nav.sub .mo { display:none;}
#mo_menu, #mo_sca { display:none}
#mo_sca { padding:20px 18px; font-size:13px; font-weight:bold;}

#mo_menu { position:relative; width:100%;}
#mo_menu ul { position:relative; width:100%;}

@media screen and (max-width: 1200px){
  main { max-width:inherit !important; margin-left:0 !important;}
  .container { width:100%;}
  .titlebar .area { width:100%; max-width:100%; padding:0 15px; text-align:center;}
  .titlebar h2 { padding:16px 0; font-size:28px;}
  .titlebar .search { right:10px; }
  #bo_list { width:100%; padding:20px 9px;}
  #bo_list .area { width:100%; max-width:100%; text-align:center;}
  ul.table li span.check { width:10%;}
  ul.table li span.number { width:40%;}
  ul.table li span.category { display:none;}
  ul.table li span.title { width:35%; border-left:0; float:none;}
  ul.table li span.title.title_adm { float:none; width:25%;}
  ul.table li.thead span.title.title_adm { border-left:1px solid #ccc;}
  ul.table li span.date { width:25%; }
  ul.table li span.writer { display:none;}

  #bo_view { width:100%; padding:10px;}
  #bo_view .area { width:100%;}
  #bo_view header h2 { padding:10px 0 0;}
  #bo_view .btnset { margin:5px 0 10px 5px;}
  #bo_view section.content .bo_img img, #bo_view .content img { max-width:100%; width:auto; height:auto;}  

  #bo_write { width:100%; padding:10px;}
  #bo_write .btn_confirm { padding-bottom:10px;}
}

@media screen and (max-width: 1024px){
  #bo_write h2 { padding:10px 0;}
  #bo_write .writeform label.label, #bo_write .writeform span.label { width:100%; height:auto; padding:5px; background:none;}
  #bo_write .writeform { width:100%; margin:5px 0; padding:5px; border:1px solid #ddd; border-radius:3px; background:#f9f9f9;}
  #bo_write .writeform label { padding:3px; font-size:15px;}
  #bo_write .writeform .chk_label { height:25px;}
  #bo_write .writeform input[type="text"],
  #bo_write .writeform input[type="password"],
  #bo_write .writeform input[type="file"],
  #bo_write .writeform select { width:100%; margin:0; background-color:#fff;}
  #bo_write .writeform select { background:#fff;}
  #bo_write .writeform button#btn_autosave { margin:5px 0 0 0;} 
  #bo_write .writeform div input[type="file"] { margin:10px 0 2px;}
  #bo_write .writeform .input_address { font-size:13px; line-height:20px;}
  #bo_write .writeform .input_address label { padding-bottom:5px; font-size:13px; line-height:20px; text-align:right;}
  #bo_write .writeform .red { margin-left:5px; font-size:14px;}
  #bo_write .writeform .tip { margin-left:0; font-size:14px; line-height:20px;}
  #bo_write .writeform .tip a.button.dark { font-size:14px; padding:4px 5px;}
  #bo_write .writeform .tip a.button.dark i { margin-right:2px;}
  #bo_write .writeform p.font_red { color:#dc0a17;}

  #bo_write .writeform button.button.dark { height:31px; margin-left:3px; vertical-align:middle;}
  #bo_write .writeform input#zip { width:100px;}
  #bo_write .writeform input#addr1, #bo_write .writeform input#addr2, #bo_write .writeform input#addr3 { margin:5px 0 0;}
  #bo_write .writeform .mobile_code { width:60px !important; font-size:15px;}
  #bo_write .writeform .mobile_number { width:180px !important; font-size:15px;}
  #bo_write .writeform .button.serial_img { height:31px; margin-top:5px; font-size:14px;}  
}

@media screen and (max-width: 800px){
  #bo_list .paging { text-align:center;}
  #bo_list .btnset { padding-top:10px;}
  ul.table li span.check { display:none;}
  ul.table li span.title, ul.table li span.title.title_adm { width:40%; border-left:0;}
  ul.table li.thead span.title.title_adm { border-left:1;}
  ul.table li span.date { display:none;}
  ul.table li span.number { width:60%;}

  #bo_view section.content { margin:50px 0;}
   
  #co_write .content, #co_list .content { margin-right:0px;}
  #co_write input[type="submit"].button, #co_list input[type="submit"].button { position:static; width:100%; height:auto; margin-top:5px; margin-left:0; padding:12px; border-radius:0; font-size:15px;}

  #co_write { margin-bottom:10px;}
  #co_write .guest, #co_list .content .guest { display:block; float:none; padding-right:0; border-right:0;}
  #co_write .guest_input, #co_list .guest_input { width:100%;} 
  #co_write #captcha, #co_list #captcha { margin:3px 0;}
  #co_write #captcha #captcha_img, #co_list #captcha #captcha_img { position:static; float:left; width:115px; height:43px; padding:0; margin:3px 3px 0 0;}
  #co_write #captcha #captcha_mp3, #co_list #captcha #captcha_mp3 { position:static; float:left; width:43px; height:43px; margin:3px 3px 0 0; padding:9px;}
  #co_write #captcha #captcha_audio, #co_list #captcha #captcha_audio { display:block; margin-bottom:5px;}
  #co_write #captcha #captcha_reload, #co_list #captcha #captcha_reload { position:static; float:left; width:43px; height:43px; margin:3px 0 0 0; padding:7px;}
  #co_write #captcha #captcha_key, #co_list #captcha #captcha_key { float:left; width:115px; height:43px; margin:3px 0 0 3px; padding:5px 8px; font-size:16px;  color:#333; line-height:30px;}

  #co_list article span h2 { margin-top:10px; color:#222;}
  #co_list article { margin-left:0px !important;}
  #co_list .member_photo, #co_list .arrow_comment, #co_list .arrow_comment2 { display:none;}
  #co_list .depth { z-index:100;}
  #co_list .ip { display:none;}




}

@media screen and (min-width: 769px){
  #co_list article { padding-left:10px !important;}
}

@media screen and (max-width: 600px){
  .titlebar .search { display:none;}
  #bo_view section.info { padding-bottom:8px; font-size:13px;}
  #bo_view .info .ip { display:none;}
  #bo_view section.file span.download_date { display:none;}
  #co_write .info, #co_list .info { display:none;}
}